var TwinklGame = TwinklGame || {};

(function (TwinklGame, manifest) {

    //CHANGE FONT SIZE ------------------------------------------------------------------------------------------------------------------------

    var theWidth,
        minWidth = 1184,
        screenIsSmall = true,
        isFullscreen = false,

        fontArr = [
            //{element:'.title-text', size_sm:'13vw', size_lg: '400px'},
            {element:'.font-button', size_sm:'4vw', size_lg: '58px'},
            {element:'.sub-heading', size_sm:'3vw', size_lg: '48px'},
            {element:'.jodal-title', size_sm:'5vw', size_lg: '65px'},
            {element:'.jodal-text', size_sm:'2.6vw', size_lg: '25px'},
            {element:'.text-button', size_sm:'3vw', size_lg: '35px'},
            {element:'.word-mat-label', size_sm:'1.8vw', size_lg: '50px'}
            //ADD IN ANY TEXT TO MAKE SURE IT RESPONDS CORRECTLY
        ];

    function resizeScreen(){
        theWidth = $('body').width();
        var smallDisplay = true;
        theWidth >= minWidth && (smallDisplay = false);
        isFullscreen && (smallDisplay = true);
        if (smallDisplay != screenIsSmall) {
            screenIsSmall = !screenIsSmall;
            $.each(fontArr, function(key, value){
                var newSize = smallDisplay ? value.size_sm : value.size_lg;
                $(value.element).css('font-size', newSize);
            });
        }
    }

    //AUDIO SAMPLES----------------------------------------------------------------------------------------------------------------------------------------------

    var buttonClickAudio = new Howl({src: [manifest.buttonClick.src]}),
        correctAnswerSoundAudio = new Howl({src: [manifest.correctAnswerSound.src]}),
        wrongAnswerAudio = new Howl({src: [manifest.wrongAnswerSound.src]}),
        swooshAudio = new Howl({src: [manifest.swoosh.src]}),
        clickAudio = new Howl({src: [manifest.clickSound.src]});

    //------------------------------------------------------------------------------------------------------------------------------------------------------------

    TwinklGame.setup = function (config) {
        resizeScreen();
        $(window).resize(resizeScreen);
        $(window).resize(textResize);

        // VARIABLES-----------------------------------------------------------------------------------------------------------------------------------------------

        var wholeDocument = $("#word-mat-container"),
            allPages = $(".pages"),
            titlePage = $("#titlePage"),
            instructionsPage = $("#instructionsPage"),
            mainPage = $("#mainPage"),
            soundToggle = $(".sound-toggle"),
            navBar = $(".go-nav-panel"),
            fullScreen = $("#fullscreen-button"),
            titleText = $("#title"),
            subHeading = $("#subContainer"),
            allInstructions = $(".allInstructions"),
            closeButton = $("#close-button"),
            letsGo = $("#lets-go-button"),
            playButton = $("#playButton"),
            instructionsPanel = $("#instructionsPanel"),
            playAgain = $("#play-again"),
            nextButton = $("#next-question-button");

        //SETUP BACKGROUND IMAGE & ALL TEXT------------------------------------------------------------------------------------------------------------------------

        closeButton.hide();

        //ASSIGN ALL CONFIG--------------------------------------------------------------------------------------------------------------------------------------
        titleText.text(config.title);  testFontSize(titleText,180); textResize();
        subHeading.text(config.sub_title);
        allInstructions.text(config.intro_text);
        wholeDocument.css({ "background-image": "url(" + config.background_image_url.assetUrl + ")" });
        $(".foreground-container").css({ "background-image": "url(" + config.foreground_image_url.assetUrl + ")" });


        $("#mainPage").css({ "background-image": "url(" + config.desk_background_image_url.assetUrl + ")" });
        $(".isItCorrect").html(config.success_title);
        $(".instant-feedback-title").html(config.success_title);
        $("#congrats-screen-text").html(config.success_text);
        $(".fit-me-button").html(config.lets_go_text);
        $("#playButton").html(config.play_button_text);
        playAgain.html(config.play_again_button_text);
        $("#intro-title-text").html(config.intro_title);

        $("#isItCorrect").text(config.well_done_title)
        nextButton.html(config.next_button_text);
        wholeDocument.addClass('interactive-theme-' + config.theme_colour);



        wholeDocument.addClass(config.branding+"-branding");


        if(config.branding ==="twinkl"){
            $(".main-twinkl-logo").show();
        }else if(config.branding==="beyond"){
            wholeDocument.css('font-family', '"roboto" !important');
            $(".main-twinkl-logo").hide();
            $(".beyond-twinkl-logo").show();
        }else if(config.branding==="egypt" || config.branding==="arabic"  ){
            
        }else if (config.branding==="eyfs"){
            $(".center-me-papi").addClass("eyfs-branding")
        }

        hidePages();
        function hidePages(){
            allPages.hide();
            titlePage.show();
        }

        //ADD ANY ELEMENTS IN HERE YOU WANT TO REMOVE WIDOWS FROM---------------------------------------------------------------------------------------------------

        titleText.widowFix();

        //INSERT ANYTHING THAT NEEDS TO FIT TO CONTAINER------------------------------------------------------------------------------------------------------------

        function textResize(){
            testFontSize(titleText,180);
            TwinklGame.Utils.fitText($(".fit-me-button"),60);
        }

        //START GAME------------------------------------------------------------------------------------------------------------------------------------------------
        letsGo.click(function(){
            swooshAudio.play();
            instructionsPage.show();
            instructionsPanel.css({'top':'100%'}).animate({'top':'15%'},500,"easeOutBack");
            titlePage.hide();
            $(".panel").addClass("drop-layout-"+perPage);
        });

        //PLAY BUTTON-----------------------------------------------------------------------------------------------------------------------------------------------
        playButton.click(function(){
            buttonClickAudio.play();
            instructionsPage.hide();
            mainPage.show();
            invertNav();
            textResize();
            resetGame();
        });

        //INSERT GAME CODE HERE **************************************************************************************************************************************
        var dataSecond="none";
        var contentArray , decoy;
        if(config.decoy_answers==true){$(".panel").addClass("decoy");decoy=true;}else{decoy=false};
        var perPage = parseInt(config.cards_per_page), numberOn = 0, draggable= [], inPlace, toDo,totalQuestionScore;

        function resetGame(){
            $(".game-top-area").empty();
            contentArray = $.extend(true, [], config.content);
            TwinklGame.Utils.shuffleArray(contentArray);
            numberOn=0;
            buildPage();
            $(".round-result-screen").hide();
        }

        var percentageWidth;
        var allLettersUsed =[];
        var allSections = [];

        function buildPage() {
            draggable = []; roundWords = [];
            inPlace = 0; squareCount = 0; toDo = 0;
            allLettersUsed = [];
            totalQuestionScore = 3;
            var lessThanNeeded = false;
            $(".game-top-area").empty();
             allSections = [];

            for (var i = numberOn; i < Math.min((parseInt(numberOn + perPage)), contentArray.length); i++) {allSections.push(contentArray[i].sections.length)}

            var max = allSections.reduce(function (a, b) {return Math.max(a, b);});
            percentageWidth = 100 / max;

            var getMin = Math.min(perPage, (contentArray.length - numberOn));

            if (getMin < perPage) {lessThanNeeded = true}

            //ADD NEEDED SQUARES
            for (var i = 0; i < perPage; i++) {$(".game-top-area").append("<div class='dropAreaCard' data-id='" + i + "'><div class='top'></div><div class='bottom'></div></div>")}

            setTimeout(function () {
                for (var i = 0; i < getMin; i++) {
                    addSquares(contentArray[numberOn], i);
                    addTopContent(i);
                    numberOn++;
                }
                if (lessThanNeeded == true) {
                    console.log(contentArray)

                    var tempNew = contentArray.slice(0, numberOn);
                    TwinklGame.Utils.shuffleArray(tempNew);
                    for (var i = getMin; i < perPage; i++)
                    {
                        addSquares(tempNew[i], i);
                    }
                }
                if (decoy == true) {
                    addDecoySquares();
                } //ADD DECOYS IF NEEDED
                addDraggable(); //MAKE DRAGGABLE
            }, 100);


            function addTopContent(num) {
                var hasImage, hasText;
                var url;
                if (contentArray[numberOn].top_image != undefined && contentArray[numberOn].top_image.assetUrl.length > 0) {
                    url = contentArray[numberOn].top_image.assetUrl;
                } else {
                    url = "";
                }

                $('[data-id="' + num + '"]').find(".top").append("<div class='image-display' style='background-image: url(" + url + ")'></div><div class='text-display'></div>");
                checkForAudioButton($('[data-id="' + num + '"]'), contentArray[numberOn]);

                if (contentArray[numberOn].top_text != undefined && contentArray[numberOn].top_text.length > 0) {
                    hasText = true;
                    $('[data-id="' + num + '"]').find($(".text-display")).text(contentArray[numberOn].top_text)
                } else {
                    hasText = false;
                    $('[data-id="' + num + '"]').find($(".text-display")).hide();
                }

                if (contentArray[numberOn].top_image != undefined && contentArray[numberOn].top_image.assetUrl.length > 0) {
                    hasImage = true;
                } else {
                    hasImage = false;
                    $('[data-id="' + num + '"]').find($(".image-display")).hide();
                }

                if (hasImage === true && hasText === true) {
                    $('[data-id="' + num + '"]').addClass("has-both")
                }
            }
        }

        var height,width,squareCount =0;
        var roundWords = [];

        function addSquares(elem,addTo){
            var word=[];

            console.log(elem,"ERE")
            for (var i =0;i<elem.sections.length;i++){
                var audioLink;
                var selec = $('[data-id="' + addTo + '"]').find(".bottom");
                if(elem.sections[i].audio && elem.sections[i].audio.assetUrl.length>0){audioLink=elem.sections[i].audio.assetUrl}else{audioLink="none"}
                var useThisText = detectCorrectPhon(elem.sections[i].text);

                word.push(useThisText);
                allLettersUsed.push(useThisText);
                selec.append("<div class='contentDropSquare' data-id='"+useThisText+"'  data-second='"+dataSecond+"' style='width:"+percentageWidth +"%'></div>");
                height = selec.find(".contentDropSquare").height();
                width = selec.find(".contentDropSquare").width();

                if(elem.sections[i].include_default ==undefined || elem.sections[i].include_default===false){
                    draggable.push("<div class='contentDropSquare' style='width:"+width +"px;height:"+height+"px'><div class='content-square-inner content-square-inner-"+squareCount+"' data-second='"+dataSecond+"' data-audio='"+audioLink+"'>"+useThisText+"</div></div>");
                    squareCount++;
                }else{
                    $('[data-id="' + addTo + '"] >.bottom > div:nth-child('+(i+1)+')').append("<div class='contentDropSquare' style='width:"+width +"px;height:"+height+"px'><div class='content-square-inner' data-second='"+dataSecond+"' data-audio='"+audioLink+"'>"+useThisText+"</div></div>");
                }
            }
            roundWords.push(word.join(""));

            if(config.branding==="arabic"|| config.branding==="egypt"){
                $(".bottom").reverseChildren();
            }
        }


        $.fn.reverseChildren = function() {
            return this.each(function(){
                var $this = $(this);
                $this.children().each(function(){ $this.prepend(this) });
            });
        };

        function addDecoySquares(){

            var amount =  draggable.length, added=0, twistedMelon = contentArray.slice(0, contentArray.length);; //VARIABLES
            TwinklGame.Utils.shuffleArray(twistedMelon);

                for(var x=0;x<twistedMelon.length;x++){
                    for(var i =0;i<twistedMelon[x].sections.length;i++){
                        var audioLink;
                        if(twistedMelon[x].sections[i].audio!=undefined && twistedMelon[x].sections[i].audio.assetUrl.length>0){audioLink=twistedMelon[x].sections[i].audio.assetUrl}else{audioLink="none"}

                        var textToUse =  detectCorrectPhon(twistedMelon[x].sections[i].text);

                        //TAKE OUT IF, IF DOESNT WORK
                        if(twistedMelon[x].sections[i].include_default!=true && allLettersUsed.includes(textToUse)===false ){
                            allLettersUsed.push(textToUse);
                            draggable.push("<div class='contentDropSquare' style='width:"+width +"px;height:"+height+"px'><div class='content-square-inner content-square-inner-"+squareCount+"' data-second='"+dataSecond+"' data-audio='"+audioLink+"'>"+textToUse+"</div></div>");
                            squareCount++;
                            added++;
                        }
                        if(added>=amount){break;}
                    }
                    if(added>=amount){break;}
                }
        }

        function detectCorrectPhon(square){

            dataSecond="none";

            if(square.indexOf('[') > -1 && square.indexOf(']') > -1 ){
                dataSecond = square.slice(square.indexOf('[')+1, square.indexOf(']'));
                var newString = square.slice(0, square.indexOf('['));
                if( newString[newString.length-1] === " "){newString=newString.slice(0,newString.length-1)}
                return newString;
            }else{
                return square
            }
        }

        //------------------------------------------------------------------------------------------------------------------------------

        function resetSize(){
            setTimeout(function(){
                var sel = $('[data-id="' + 0 + '"]').find(".bottom");
                var newHeight = sel.find(".contentDropSquare").height();
                var newWidth = sel.find(".contentDropSquare").width();
                $(".game-bottom-area").find($(".contentDropSquare")).css({"height":newHeight,"width":newWidth});
            },100)
        }

        function addDraggable(){
            $(".game-bottom-area .center-me-papi").empty();
            TwinklGame.Utils.shuffleArray(draggable);
            draggable.forEach(function(e,elem){
                toDo++;
                $(".game-bottom-area .center-me-papi").append(e)
            });

            if(decoy==true){toDo=toDo/2}

            $(".game-bottom-area .center-me-papi").find(".contentDropSquare").draggable({
                start:function(event,ui){
                    $(".contentDropSquare").css({"z-index":"1"});
                    $(this).css({"z-index":"3","transform":"rotate(4deg)","transition":"transform 0.2s" });
                    checkForAudio($(this).find(".content-square-inner"),$(this).find(".content-square-inner").attr("data-audio"));
                },
                stop:function(event,ui){$(this).css({"transform":"rotate(0deg)"})},
                revert: true,
            });

            $(".game-top-area").find(".contentDropSquare").droppable({
                drop: function (ev, ui) {
                    var getIdea = $(this).attr("data-id");
                    $(".movable-matching-card").removeClass("being-dragged-too");

                    var secondAttr = $(ui.draggable).find(".content-square-inner").attr("data-second");
                    var secondCheck = $(this).attr("data-second");

                    if (getIdea === $(ui.draggable).text() && secondAttr===secondCheck) {
                        $(ui.draggable).css({"transform":"rotate(0deg)", "transition":"none!important"});
                        $(ui.draggable).detach().css({top: 0, left: 0,border:"none",width:"100%"}).appendTo(this);
                        $(ui.draggable).draggable('disable');
                        $(this).droppable("disable");
                        inPlace++;
                        clickAudio.play();
                        $(this).css({"transform":"rotate(0deg)", "transition":"none!important"})
                    } else {
                        wrongAnswerAudio.play();
                        if(totalQuestionScore>=2){totalQuestionScore--}
                    }
                    if (inPlace === toDo) {
                        setTimeout(function(){
                            $(".round-result-screen").show();
                            $("#instant-feedback-popup").css({'top': '100%'}).animate({'top': '15%'}, 500, "easeOutBack");
                            //workOutRoundScore();
                            displayCompletedWords();
                            swooshAudio.play();
                        },100)
                    }
                }
            });
           setTimeout(function () {fitAllText();},100)
        }

        var audioTag=0, allSquareAudio=[];

        function checkForAudio(square,link){
            if(square.attr("audio-added") && link!="none"){
                var tag = square.attr("audio-added");
                allSquareAudio[tag].play();
            } else{
                allSquareAudio.push(new Howl({src: link}));
                square.attr("audio-added",audioTag);
                allSquareAudio[audioTag].play();
                audioTag++
            }
        }

        var biggerAudio=[], biggerAudioTag= 0;

        function checkForAudioButton(put, item){
            if(item.top_audio!=undefined && item.top_audio.assetUrl.length>0){
                var buttonCode = '<div data-big-audio="'+biggerAudioTag+'" class="play-sound flex-vert-center"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="play-circle" class=" theme-color svg-inline--fa rt-play-circle fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="theme-colour-dark" fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm115.7 272l-176 101c-15.8 8.8-35.7-2.5-35.7-21V152c0-18.4 19.8-29.8 35.7-21l176 107c16.4 9.2 16.4 32.9 0 42z"></path></svg> </div>';
                put.append(buttonCode)
                biggerAudio.push(new Howl({src: [item.top_audio.assetUrl]}));
                $('[data-big-audio="' + biggerAudioTag + '"]').click(function(){
                    biggerAudio[$(this).attr("data-big-audio")].play()
                });
                biggerAudioTag++;
            }
        }

        function fitAllText() {
            var allSize=[];

            for(var i=0;i<perPage;i++){testFontSize($('[data-id="' + i + '"]').find(".text-display"),70);}

            for(var i =0;i<squareCount;i++){
                var selector = $(".content-square-inner-"+i);
                testFontSize(selector,70);
                allSize.push(parseInt(selector.css("font-size"),10))
            }
            allSize.sort(function(a, b){return parseInt(a)- parseInt(b);});
            $(".content-square-inner").css("font-size",allSize[0]);
        }

        nextButton.on("click",function(){
            if(numberOn>= Math.min(contentArray.length,(config.question_count))){
                $(".pages").hide();
                $("#well-done").show().css({'top':'100%'}).animate({'top':'15%'},500,"easeOutBack");
                swooshAudio.play();
            } else{
                buttonClickAudio.play();
                buildPage();
                $(".round-result-screen").hide();
            }
        });

        playAgain.on("click",function(){
            buttonClickAudio.play();
            $(".pages").hide();
            $("#mainPage").show();
            resetGame();
        });

        function displayCompletedWords(){
            $(".completed-words-container").empty();


            for(var i=0;i<=(roundWords.length-1);i++){
                if(config.branding==='egypt' || config.branding==='arabic' ){
                    //roundWords[i]=  roundWords[i].split("").join('');
                }
                $(".completed-words-container").append(roundWords[i]);
                if(i<roundWords.length){$(".completed-words-container").append("<br>")}
            }
            TwinklGame.Utils.fitText($(".completed-words-container"),60);
        }

        //NAVIGATION FUNCTIONS ******************************************************************************************************************************************

        //CLOSE BUTTON
        closeButton.click(function(){
            buttonClickAudio.play();
            hidePages();
            invertNav();
            textResize();
        });

        //INVERT THE NAVIGATION COLOURS AND TOGGLE CLOSE
        function invertNav(){
            fullScreen.toggleClass("inverted");
            soundToggle.toggleClass("inverted");
            navBar.toggleClass("theme-background-dark");
            closeButton.toggle();
        }

        //FULLSCREEN TOGGLE ---------------------------------------------------------------
        fullScreen.click(function () {
            buttonClickAudio.play();
            if(fullScreen.hasClass("expand-screen"))
            {fullScreen
                .removeClass("expand-screen")
                .addClass("reduce-screen");
                TwinklGame.Utils.makeFullScreen(document.getElementById('word-mat-container'));
            }
            else{
                fullScreen
                    .removeClass("reduce-screen")
                    .addClass("expand-screen");
                TwinklGame.Utils.leaveFullScreen();
            }
            resetSize();
        });

        $(document).on('webkitfullscreenchange mozfullscreenchange fullscreenchange MSFullscreenChange', function () {
            isFullscreen = !isFullscreen;
            resizeScreen();textResize();resetSize();
        });

        //SOUND TOGGLE -----------------------------------------------------------------------
        soundToggle.click(function () {
            buttonClickAudio.play();
            if(soundToggle.hasClass("sound-off"))
            {soundToggle
                .removeClass("sound-off")
                .addClass("sound-on");
                Howler.mute(true);
            }else{
                soundToggle
                    .removeClass("sound-on")
                    .addClass("sound-off");
                Howler.mute(false);
            }
        });

        //CHECK IF TEXT OVERFLOWS----------------------------------------------------------------

        function testFontSize(e, s) {
            e.css( "font-size", s + ("px"));
            var size = e.css('font-size'); //GETS FONT SIZE
            size = parseInt(size, 10); //REMOVE PX
            //WHILE TEXT OVERFLOWS ELEMENT REDUCE TEXT SIZE
            for(;e.get(0).offsetHeight<e.get(0).scrollHeight||e.get(0).offsetWidth<e.get(0).scrollWidth;)e.css("font-size","-=1");
        }
        resizeScreen();
        textResize();
        $('#preload-div').hide();
    };
})(TwinklGame, lib.manifest);